<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
        user-select: none;
    }

    #box {
        width: 1024px;
        height: 650px;
        position: relative;
        margin: 50px auto;
    }

    #box img {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        transition: all 800ms;
    }

    #box img.on {
        opacity: 1;
    }

    .btn {
        width: 50px;
        height: 90px;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        position: absolute;
        top: 50%;
        margin-top: -45px;
        font-size: 48px;
        font-weight: bold;
        line-height: 90px;
        text-align: center;
        cursor: pointer;
        transition: all 500ms;
    }

    .btn:hover {
        background: rgba(0, 0, 0, 0.6);
    }

    .btnLeft {
        left: 0;
    }

    .btnRight {
        right: 0;
    }

    #box ul {
        width: 400px;
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -200px;
    }

    #box li {
        list-style: none;
        width: 50px;
        height: 10px;
        background: #f5f5f5;
        float: left;
        margin: 0 15px 0 0;
        border-radius: 5px;
        cursor: pointer;
        transition: all 800ms;
    }

    #box li.on {
        background: orange;
    }
    </style>
</head>

<body>
    <div id="box">
        <img src="images/1.jpg" alt="" class="on">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <div class="btn btnLeft">&lt;</div>
        <div class="btn btnRight">&gt;</div>
        <ul>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
    var oBox = document.getElementById('box');
    var aImg = oBox.getElementsByTagName('img');
    var oBtnLeft = oBox.getElementsByTagName('div')[0];
    var oBtnRight = oBox.getElementsByTagName('div')[1];
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var index = 0;
    var lastIndex = 0;
    oBtnRight.onclick = function() {
        change(function() {
            index++;
            if (index >= aImg.length) {
                index = 0;
            }
        })
    }

    oBtnLeft.onclick = function() {
        change(function() {
            index--;
            if (index < 0) {
                index = aImg.length - 1;
            }
        })
    }

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onclick = function() {
            change(function() {
                index = this.index;
            }.bind(this));
        }
    }

    function change(callback) {
        callback();
        aImg[index].className = 'on';
        aImg[lastIndex].className = '';
        aLi[index].className = 'on';
        aLi[lastIndex].className = '';
        lastIndex = index;
    }
    </script>
</body>

</html>